﻿<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>关于我单页-杨青青个人博客模板主题《今夕何夕》</title>
    <meta name="keywords" content="blog"/>
    <meta name="description" content="blog"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link
            href="https://unpkg.com/md-editor-v3@2.2.0/lib/style.css"
            rel="stylesheet"
    />
    <link rel="stylesheet" href="/editormd/css/editormd.css">
    <link rel="stylesheet" href="/editormd/lib/style.css">
    <link href="/css/base.css" rel="stylesheet">
    <link href="/css/m.css" rel="stylesheet">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="/editormd/lib/codemirror/addon/dialog/dialog.css">
    <link rel="stylesheet" href="/editormd/lib/codemirror/codemirror.min.css">
    <link rel="stylesheet" href="/editormd/lib/codemirror/addon/search/matchesonscrollbar.css">
    <link rel="stylesheet" href="/editormd/lib/codemirror/codemirror.min.css">
    <script src="/js/jquery-1.8.3.min.js"></script>
    <script src="/js/comm.js"></script>
    <script src="/js/vue.js"></script>
    <script src="/js/axios.min.js"></script>
    <script src="/editormd/lib/marked.min.js"></script>
    <script src="/editormd/lib/prettify.min.js"></script>
    <script src="/editormd/lib/raphael.min.js"></script>
    <script src="/editormd/lib/underscore.min.js"></script>
    <script src="/editormd/lib/codemirror/codemirror.min.js"></script>
    <script src="/editormd/lib/sequence-diagram.min.js"></script>
    <script src="/editormd/lib/flowchart.min.js"></script>
    <script src="/editormd/lib/jquery.flowchart.min.js"></script>
    <script src="/editormd/editormd.js"></script>
    <script src="/js/modernizr.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }
        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
    </style>
</head>
<body>
<div id="app">
    <!--top begin-->
    <header id="header">
        <div class="navbox">
            <h2 id="mnavh"><span class="navicon"></span></h2>
            <div class="logo"><a href="#">乐享平台</a></div>
            <nav>
                <ul id="starlist">
                    <li><a href="/toIndex">首页</a></li>
                    <li><a href="/list">文章</a></li>
                    <li class="menu"><a href="list2.html">资源共享</a>
                        <ul class="sub">
                            <li><a href="/6">文档</a></li>
                            <li><a href="/7">音乐</a></li>
                            <li><a href="/8">视频</a></li>
                            <li><a href="/7">软件</a></li>
                            <li><a href="/8">笔记</a></li>
                        </ul>
                        <span></span></li>
                    <li><a href="/about">个人中心</a></li>
                    <li><a href="/about"><i class="el-icon-edit-outline"
                                                 style="color: white;font-size: 35px;padding-top: 10px;"></i></a></li>
                    <!--        <li><a href="daohang.html"></a></li>-->
                    <!--        <li><a href="about.html">关于我</a></li>-->
                </ul>
            </nav>
            <div class="searchico"></div>
        </div>
    </header>
    <!--top end-->
    <article>
        <div class="whitebg about">
            <h1 class="gd_title">写文章</h1>
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="标题">
                    <el-input v-model="form.title"></el-input>
                </el-form-item>
                <el-form-item label="专栏">
                    <el-select v-model="form.column" placeholder="请选择活动区域">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="类型">
                    <el-select v-model="form.type" placeholder="请选择活动区域">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="是否公开">
                    <el-switch v-model="form.ispublic"></el-switch>
                </el-form-item>
                <el-form-item label="简介">
                    <el-input type="textarea" v-model="form.introduction"></el-input>
                </el-form-item>
                <el-form-item label="正文">
                    <div id="editor-md">
                        <textarea id="message" name="message">{{form.content}}</textarea>
                    </div>
                </el-form-item>
                <el-form-item label="封面">
                    <el-upload
                            class="avatar-uploader"
                            action="/file/upload"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload">
                        <img v-if="form.image" :src="form.image" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">立即创建</el-button>
                    <el-button>取消</el-button>
                </el-form-item>
            </el-form>
        </div>
    </article>
    <footer>
        <div class="box">
            <div class="wxbox">
                <ul>
                    <li><img src="/images/wxgzh.jpg"><span>微信公众号</span></li>
                    <li><img src="/images/wx.png"><span>我的微信</span></li>
                </ul>
            </div>
            <div class="endnav">
                <p><b>站点声明：</b></p>
                <p>1、本站个人博客模板，均为杨青青本人设计，个人可以使用，但是未经许可不得用于任何商业目的。</p>
                <p>2、所有文章未经授权禁止转载、摘编、复制或建立镜像，如有违反，追究法律责任。举报邮箱：<a
                        href="http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=HHh9cn95b3F1cHVye1xtbTJ-c3E"
                        target="_blank">dacesmiling@qq.com</a></p>
                <p>Copyright © <a href="#" target="_blank">www.yangqq.com</a> All Rights Reserved. 备案号：<a
                        href="http://www.bootstrapmb.com/" target="_blank">蜀ICP备11002373号-1</a></p>
            </div>
        </div>
        <a href="#">
            <div class="top"></div>
        </a></footer>
</div>
<script type="text/javascript">
    let app = new Vue({
        el: "#app",
        data() {
            return {
                form: {
                    id: '',
                    title: '',
                    column: '',
                    ispublic: '',
                    image:'',
                    introduction: '',
                    content:''
                },
                columns: [0]
            }
        },
        mounted() {
            this.getData();
            this.init();
        },
        methods: {
            getData() {
                axios.get("/column").then(res => {
                    console.log(res.data);
                    this.columns = res.data.data;
                })
            },
            init() {
                $(function () {
                    testEditor = editormd("editor-md", {
                        width: "100%",
                        height: 500,
                        // autoHeight:true,
                        path: "editormd/lib/",
                        watch: true,
                        preview: true,
                        editor: false,
                        imageUpload: true,
                        imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
                        imageUploadURL: "/file/upload",
                    });
                    $("#click").click(function () {
                        alert(testEditor.getPreviewedHTML());
                    })
                });
            },
            onSubmit() {
                // alert(testEditor.getMarkdown());
                this.form.content = testEditor.getPreviewedHTML();
                console.log(this.form);
                axios.post("/article/add", this.form).then(res => {
                    console.log(res.data);
                })
            },
            handleAvatarSuccess(res, file) {
                this.from.image = URL.createObjectURL(file.raw);
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            }


        }
    })
</script>
</body>
</html>
